<template>
  <div class="home">
    <!-- <van-nav-bar><van-nav-bar/> -->
    <van-nav-bar>
      <template #title>
        <router-link class="h1" to="/search">
          <van-icon name="search" />
          <span>搜索</span>
        </router-link>
      </template>
    </van-nav-bar>

    <van-tabs v-model="active" @click="switchTab">
      <van-tab
        :title="item.name"
        v-for="item in cate"
        :key="item._id"
      ></van-tab>
    </van-tabs>

    <div class="txtlist" style="padding-bottom: 60px">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <template #pulling="props">
          <img
            class="doge"
            src="../assets/abc.gif"
            :style="{ transform: `scale(${props.distance / 80})` }"
          />
        </template>

        <!-- 释放提示 -->
        <template #loosing>
          <img class="doge" src="../assets/abc.gif" />
        </template>

        <!-- 加载提示 -->
        <template #loading>
          <img class="doge" src="../assets/abc.gif" />
        </template>
        <van-list
          v-model="loading"
          :finished="finished"
          @load="code"
          :immediate-check="false"
        >
          <!-- 中间图标 -->
          <template #finished>
            <div style="text-align: center; padding: 10px">
              <van-icon name="clock-o" size="30" color="red" />
            </div>
          </template>

          <template #loading>
            <div style="text-align: center; padding: 10px">
              <van-icon name="clock-o" size="30" color="red" />
            </div>
          </template>
          <div
          class="border1"
            v-for="item in txtlist"
            :key="item._id"
            @click="
              $router.push({
                path: '/article',
                query: { id: item._id, title: item.title },
              })
            "
          >
            <p>标题：{{ item.title }}</p>
            <div
              :class="{
                none: item.poster_type == 1,
                articlesingleImg: item.poster_type == 2,
                articlemoreImg: item.poster_type == 3,
              }"
            >
              <img v-for="img in item.imageSrc" v-lazy="img" />
            </div>
            <p >{{ item.time | timeFilter }}</p>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<style lang="less" scoped>
::v-deep .h1 {
  width: 280px;
  height: 34px;
  background: lightgreen;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
van-image {
  width: 100%;
}

::v-deep .van-nav-bar__title {
  max-width: 75%;
}
::v-deep .van-tabs__wrap--scrollable .van-tab {
  border-bottom: 1px solid #ccc;
}
::v-deep .van-tab {
  border-right: 1px solid #ccc;
}
::v-deep .van-tabs__line {
  bottom: 5.4vw;
  width: 4.66667vw;
  background-color: @color;
}
.txtlist {
  margin: 0 20px;
  overflow: hidden;
  img {
    max-width: 100%;
    margin: 0 5px;
  }
  .none {
    display: none;
  }
  // .articlemoreImg {
  //   width: 100%;
  //   height: 56.25px;
  // }
}
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
.border1{
  border-bottom: 1px solid rgb(51, 0, 255);
}
</style>
<script>
import { getCateList, codelist } from "@/api/home.js";
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      active: 0,
      cate: [],
      txtlist: [], //文章列表
      loading: false, //是否正在加载
      finished: false, //是否全部加载完毕
      skip: 0, //从skip开始拿
      limit: 20, //一次拿多少条
      refreshing: false, //是否正在刷新
    };
  },
  // 普通接口
  // created(){
  //   this.getCate()
  // },
  // methods:{
  //   getCate(){
  //     this.$http.post('https://d33a5037-6c63-4e92-8bb1-30018ab701ea.bspapp.com/http/api/get_cate_list')
  //     .then(res=>{
  //       console.log(res)
  //     })
  //   }
  // }
  computed: {
    //获取当前被选择的分类id
    cate_id() {
      let active_cate = this.cate[this.active];
      // console.log(active_cate);
      if (!active_cate) return "";
      return active_cate._id;
    },
  },
  created() {
    console.log("created");
    this.getCate(); //获取分类
  },
  //  组件被keep-alive缓存后 会多两个生命周期钩子
  //  激活后   执行的比较晚  比mounted还wan
  activated() {
    console.log("激活");
  },
  //  失活后
  deactivated() {
    console.log("失活");
  },

  methods: {
    //切换分类
    switchTab() {
      console.log(this.active);
      this.txtlist = []; //清空原来数据
      this.skip = 0;
      this.finished = false; //如果不改，会有bug
      this.code();
    },
    //获取头部标签
    getCate() {
      getCateList().then((res) => {
        console.log(res);
        this.cate = res.data;
        this.code();
        // this.cate_id = this.cate[this.active]._id
      });
    },
    // 分类文章
    code(flag) {
      let { cate_id, skip, limit } = this;
      // console.log("触发了上拉加载");
      codelist({
        cate_id,
        skip,
        limit,
      })
        .then((res) => {
          console.log(res);

          // 每次请求完 做个判断 是否全部加载完毕了 如果加载完毕了 this.finished true
          // 如果没完毕 把loading false
          if (res.data) {
            res.data = res.data.map((v) => {
              v.imageSrc = v.imageSrc.map((v) => {
                return v + "?imageView2/1/w/100/h/100";
              });
              return v;
            });
          }

          if (flag) {
            //是刷新
            this.refreshing = false; //结束刷新
            this.txtlist = res.data; //把数据替换
          } else {
            this.txtlist.push(...res.data); //数据追加
          }

          let len = this.txtlist.length;
          let count = res.count;
          if (len >= count) {
            this.finished = true;
          } else {
            this.loading = false;
            this.skip = len;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onRefresh() {
      this.skip = 0;
      this.finished = false; //如果不改，会有bug
      this.code(true);
    },
  },
  //过滤器 时间戳
  filters: {
    timeFilter(times) {
      let time = new Date(times);
      function timeAdd0(str) {
        if (str < 10) {
          str = "0" + str;
        }
        return str;
      }
      let y = time.getFullYear();
      let m = time.getMonth() + 1;
      let d = time.getDate();
      let h = time.getHours();
      let mm = time.getMinutes();
      let s = time.getSeconds();
      return (
        y +
        "-" +
        timeAdd0(m) +
        "-" +
        timeAdd0(d) +
        " " +
        timeAdd0(h) +
        ":" +
        timeAdd0(mm) +
        ":" +
        timeAdd0(s)
      );
    },
  },
};
</script>
